<!-- 计算属性:computed -->
<script setup lang="ts">
import { computed, ref } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

// 完整写法
const fullName = computed({
  //获取值
  get() {
    return `${firstName.value} ${lastName.value}`
  },
  //设置->修改值->只有在需要赋值时才写
  set(value) {
    console.log(value)
    const names = value.split(' ')
    firstName.value = names[0]
    lastName.value = names[1]
  },
})
</script>

<template>
  <div>{{ fullName }}</div>
  <button @click="fullName = 'hi john'">修改姓名</button>
</template>

<style></style>
